<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>干货踢馆到你家</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <link rel="stylesheet" href="lib/animate.min.css">
  <link rel="stylesheet" href="lib/swiper.min.css">
  <link rel="stylesheet" href="css/style.css?1.02">
</head>
<body>
<div class="loading">
  <div class="loading-content">
    <img src="img/logo.png" alt="logo">
    <p class="load-p">0%</p>
  </div>
</div>
<section class="app" style="position: fixed">
  <article class="page-open">
    <a href="javascript:" id="rule"></a>
    <a href="javascript:" id="start"></a>
  </article>
  <article class="page-rule"><!-- 规则 --></article>
  <article class="page-content">
    <div class="swiper-container">
      <ul class="swiper-wrapper">
        <!-- 准备道具 -->
        <li class="swiper-slide">
          <div class="p-0-1 ani" swiper-animate-effect="fadeInDown" swiper-animate-delay=".3s"></div>
          <div class="p-0-2 ani" swiper-animate-effect="pulse"></div>
          <div class="p-0-3 ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay=".5s"></div>
          <div class="p-0-4 ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay=".8s"></div>
          <div class="p-0-5 ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="1s"></div>
          <div class="p-0-6 ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="1.2s"></div>
          <div class="p-0-7 ani" swiper-animate-effect="fadeInLeft" swiper-animate-delay="1.4s"></div>
          <div class="arrow"></div>
        </li>
        <!-- 步骤一 -->
        <li class="swiper-slide">
          <div class="start-box">
            <div class="start-1 action ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".1s"></div>
            <div class="start-2 ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".2s"></div>
            <div class="start-3 ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".3s"></div>
            <div class="start-4 ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".4s"></div>
          </div>
          <div class="gif-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-delay=".2s"></div>
          <div class="p-1-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-delay=".4s"></div>
          <div class="p-1-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-delay=".6s"></div>
          <div class="arrow"></div>
        </li>
        <!-- 步骤二 -->
        <li class="swiper-slide">
          <div class="start-box">
            <div class="start-1 ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".1s"></div>
            <div class="start-2 action ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".2s"></div>
            <div class="start-3 ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".3s"></div>
            <div class="start-4 ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".4s"></div>
          </div>
          <div class="gif-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-delay=".2s"></div>
          <div class="p-2-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-delay=".4s"></div>
          <div class="p-2-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-delay=".6s"></div>
          <div class="arrow ani"></div>
        </li>
        <!-- 步骤三 -->
        <li class="swiper-slide">
          <div class="start-box">
            <div class="start-1 ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".1s"></div>
            <div class="start-2 ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".2s"></div>
            <div class="start-3 action ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".3s"></div>
            <div class="start-4 ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".4s"></div>
          </div>
          <div class="gif-3 ani" swiper-animate-effect="fadeInUp" swiper-animate-delay=".2s"></div>
          <div class="p-3-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-delay=".4s"></div>
          <div class="p-3-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-delay=".6s"></div>
          <div class="up-box">
            <div class="zs" style="background: url(img/zs1.gif) no-repeat center/contain;"></div>
            <div class="uploadimg anaway"></div>
          </div>
          <div class="arrow"></div>
        </li>
        <!-- 步骤四 -->
        <li class="swiper-slide">
          <div class="start-box">
            <div class="start-1 ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".1s"></div>
            <div class="start-2 ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".2s"></div>
            <div class="start-3 ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".3s"></div>
            <div class="start-4 action ani" swiper-animate-effect="zoomIn" swiper-animate-delay=".4s"></div>
          </div>
          <div class="gif-4 ani" swiper-animate-effect="fadeInUp" swiper-animate-delay=".2s"></div>
          <div class="p-4-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-delay=".4s"></div>
          <div class="p-4-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-delay=".6s"></div>
          <div class="up-box">
            <div class="zs" style="background: url(img/zs2.gif) no-repeat center/contain;"></div>
            <div class="uploadimg anaway"></div>
          </div>
          <div class="arrow"></div>
        </li>

        <!-- 上传图片 -->
        <li class="swiper-slide uppage">
          <a href="javascript:" id="lUpimg1"></a>
          <a href="javascript:" id="lUpimg2"></a>
          <textarea id="lUtext" rows="3" placeholder="可分享实验胜出的纸尿裤品牌，谁吸的更快，谁吸完之后更干爽!"></textarea>
          <button type="button" id="updata"></button>
        </li>
      </ul>
    </div>
  </article>
</section>
<script>
  var images = [
    'img/arrow.png',
    'img/bg.jpg',
    'img/camera.png',
    'img/open.jpg',
    'img/p-0-1.png',
    'img/p-0-2.jpg',
    'img/p-0-3.png',
    'img/p-0-4.png',
    'img/p-0-5.png',
    'img/p-0-6.png',
    'img/p-0-7.png',
    'img/p-1-1.png',
    'img/p-1-2.png',
    'img/p-2-1.png',
    'img/p-2-2.png',
    'img/p-3-2.png',
    'img/p-4-1.png',
    'img/p-4-2.png',
    'img/r1.gif',
    'img/r2.gif',
    'img/r3.gif',
    'img/r4.gif',
    'img/rule.jpg',
    'img/start-1-a.png',
    'img/start-1.png',
    'img/start-2-a.png',
    'img/start-2.png',
    'img/start-3-a.png',
    'img/start-3.png',
    'img/start-4-a.png',
    'img/start-4.png',
    'img/uppage.jpg',
    'img/zs1.gif',
    'img/zs2.gif'
  ];
</script>
<script src="lib/zepto.min.js"></script>
<script src="lib/swiper.animate.js"></script>
<script src="lib/swiper.jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>